<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://fonts.googleapis.com/css2?family=Vollkorn&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Travel</title>
  </head>
  <body>
    <div class="container">
      <!--Navbar-->
      <div class="open-navbar-icon navbar-icon center">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <div class="navbar-wrapper">
        <div class="navbar">
          <div class="close-navbar-icon navbar-icon center">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
          </div>
          <div class="nav-list">
            <a href="#" class="nav-link center">Home</a>
            <a href="#" class="nav-link center">Tours</a>
            <a href="#" class="nav-link center">About Us</a>
            <a href="#" class="nav-link center">Offer</a>
            <a href="#" class="nav-link center">Contact</a>
          </div>
        </div>
      </div>
      <!--End of Navbar-->
      <!--header-->
      <header class="header center">
        <div class="header-text">
          <h1 class="heading">Around the World</h1>
          <p class="header-paragraph">
            It leads you to a new world that you can never imagin
          </p>
        </div>
        <img
          src="images/air-balloon.png"
          alt="Header Image"
          class="header-image"
        />
        <div class="logo">
          <h1>
            <span class="center">t</span>
            <span class="center">r</span>
            <span class="center">a</span>
            <span class="center">v</span>
            <span class="center">e</span>
            <span class="center">l</span>
          </h1>
        </div>
      </header>
      <!--End of Header-->
      <!--Popular Tours-->
      <section class="popular-tours">
        <h1 class="popular-tours-heading">The Most Popular Tours</h1>
        <div class="cards-wrapper">
          <div class="card">
            <div class="front-side">
              <img
                src="images/hiking.jpg"
                alt="Hiking Image"
                class="card-image"
              />
              <h1 class="tour-name">Hiking</h1>
              <ul class="card-list">
                <li class="card-list-item">2 days tour</li>
                <li class="card-list-item">Up to 10 people</li>
                <li class="card-list-item">3 tour guides</li>
                <li class="card-list-item">Sleep in private tent</li>
                <li class="card-list-item">Difficulty: medium</li>
              </ul>
              <button class="navigation-button">price &gt;&gt;</button>
            </div>
            <div class="back-side center">
              <button class="navigation-button">&lt;&lt;back</button>
              <h3 class="tour-price">$299</h3>
              <button class="card-button">Booking</button>
            </div>
          </div>
          <div class="card">
            <div class="front-side">
              <img
                src="images/cruise-ships.jpg"
                alt="Cruise Image"
                class="card-image"
              />
              <h1 class="tour-name">Cruise</h1>
              <ul class="card-list">
                <li class="card-list-item">10 days tour</li>
                <li class="card-list-item">Up to 20 people</li>
                <li class="card-list-item">4 tour guides</li>
                <li class="card-list-item">Sleep on the cruise</li>
                <li class="card-list-item">Difficulty: easy</li>
              </ul>
              <button class="navigation-button">price &gt;&gt;</button>
            </div>
            <div class="back-side center">
              <button class="navigation-button">&lt;&lt;back</button>
              <h3 class="tour-price">$1099</h3>
              <button class="card-button">Booking</button>
            </div>
          </div>
          <div class="card">
            <div class="front-side">
              <img
                src="images/fruits-picking.jpg"
                alt="Fruits Picking Image"
                class="card-image"
              />
              <h1 class="tour-name">Picking</h1>
              <ul class="card-list">
                <li class="card-list-item">1 days tour</li>
                <li class="card-list-item">Up to 20 people</li>
                <li class="card-list-item">2 tour guides</li>
                <li class="card-list-item">Season Fruits</li>
                <li class="card-list-item">Difficulty: easy</li>
              </ul>
              <button class="navigation-button">price &gt;&gt;</button>
            </div>
            <div class="back-side center">
              <button class="navigation-button">&lt;&lt;back</button>
              <h3 class="tour-price">$50</h3>
              <button class="card-button">Booking</button>
            </div>
          </div>
        </div>
      </section>
      <!--End of Popular Tours-->
      <!--Stories-->
      <section class="stories">
        <div class="video-container">
          <video class="bg-video" autoplay muted loop>
            <source src="images/video.mp4" type="video/mp4" />
          </video>
        </div>
        <div class="stories-wrapper">
          <div class="story-bg">
            <div class="story">
              <img
                src="images/customer1.jpg"
                alt="Customer Image"
                class="story-image"
              />
              <div class="story-text">
                <h1 class="story-heading">
                  There were the best days of this year
                </h1>
                <div class="story-paragraph">
                  I went for this fruit picking with my family last week and it
                  was so much fun!
                </div>
              </div>
            </div>
          </div>
          <div class="story-bg">
            <div class="story">
              <img
                src="images/customer2.jpg"
                alt="Customer Image"
                class="story-image"
              />
              <div class="story-text">
                <h1 class="story-heading">I enjoyed this great tour!</h1>
                <div class="story-paragraph">
                  I had a wanderful weekend with my boyfriend.
                </div>
              </div>
            </div>
          </div>
          <div class="story-bg">
            <div class="story">
              <img
                src="images/customer3.jpg"
                alt="Customer Image"
                class="story-image"
              />
              <div class="story-text">
                <h1 class="story-heading">Nice Trip!</h1>
                <div class="story-paragraph">
                  This cruise trip was fantastic and the food they offered on
                  the cruise was so yummy!
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--End of Stories-->
      <!--Contact-->
      <section class="contact">
        <h1 class="contact-heading">Contact Us</h1>
        <form class="contact-form">
          <div class="input-group">
            <label for="name">Full name</label>
            <input
              type="text"
              id="name"
              class="contact-input"
              placeholder="Enter Your Name"
            />
          </div>
          <div class="input-groups">
            <div class="input-group">
              <label for="email">Email</label>
              <input
                type="email"
                id="email"
                class="contact-input"
                placeholder="Enter Your Email"
              />
            </div>
            <div class="input-group">
              <label for="phone">Phone</label>
              <input
                type="text"
                id="phone"
                class="contact-input"
                placeholder="Enter Your Phone"
              />
            </div>
          </div>
          <div class="input-group">
            <label for="message">Message</label>
            <textarea
              id="message"
              class="form-textarea"
              placeholder="Your Messages Here..."
            ></textarea>
          </div>
          <input type="submit" value="Submit" class="form-btn" />
        </form>
      </section>

      <!--End of Contact-->
      <footer class="footer">
        <div class="footer-list">
          <a href="#" class="footer-link">Home</a>
          <a href="#" class="footer-link">Tours</a>
          <a href="#" class="footer-link">About Us</a>
          <a href="#" class="footer-link">Offer</a>
          <a href="#" class="footer-link">Contact</a>
        </div>
        <p class="footer-paragraph">
          Copyright &copy; codeAndCreate ALl Rights Reserved
        </p>
      </footer>
      <!--End of Footer-->
    </div>
    <script src="script.js"></script>
  </body>
</html>
